<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>面向对象</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 600px;
                height: 350px;
                border: 10px solid pink;
                margin: 30px auto;
                display: flex;
                flex-direction: column;
            }

            .box > ul {
                height: 80px;
                display: flex;
            }

            .box > ul > li {
                flex: 1;
                background-color: skyblue;
                color: #fff;
                font-size: 34px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }

            .box > ul > li.active {
                background-color: orange;
            }

            .box > ol {
                flex: 1;
                position: relative;
            }

            .box > ol > li {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                display: none;
                justify-content: center;
                align-items: center;
                background-color: purple;
                color: #fff;
                font-size: 100px;
            }

            .box > ol > li.active {
                display: flex;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>

        <div class="box" id="box1">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>
        <script>
            // 创建tap构造函数，添加默认事件为click
            function Taps(el, type = "click") {
                // 通过传进来的元素来获取需要的节点
                this.ele = document.querySelector(el);
                this.btns = this.ele.querySelectorAll("ul>li");
                this.boxs = this.ele.querySelectorAll("ol>li");
                // 将格式化方法挂载到Taps原型上
                Taps.prototype.init = function () {
                    this.btns.forEach((element, index) => {
                        element.addEventListener(type, () => {
                            for (let i = 0; i < this.btns.length; i++) {
                                this.btns[i].classList.remove("active");
                                this.boxs[i].classList.remove("active");
                            }
                            this.btns[index].classList.add("active");
                            this.boxs[index].classList.add("active");
                        });
                    });
                };
                this.init();
            }

            new Taps("#box");
            new Taps("#box1", "mouseover");
        </script>
    </body>
</html>
